<template>
	<view>
		<view class="img-bg">
			<view class="top-icon"></view>
			<!-- 搜索栏 -->
			<view class="search">
				<van-search placeholder="无线键盘" right-icon="scan" background="" shape="round"/>
			</view>
			<!-- 标签 -->
			<!-- 轮播图 -->
			<view class="swiper">
				<view class="uni-margin-wrap">
					<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
						:duration="duration">
						<swiper-item>
							<view class="swiper-item uni-bg-red">A</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item uni-bg-green">B</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item uni-bg-blue">C</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.img-bg{
	width: 100%;
	height: 260px;
	background-image: url("https://picnew13.photophoto.cn/20190104/dianshangxiqingnianhuojiehuodongbeijingtu-32369397_1.jpg");
	background-size: 100% 130%;
	border-radius: 0 0 20% 20%;
}
.top-icon{
	width: 100%;
	height: 90px;
}
.search{
	width: 90%;
	padding: 0 5%;
	height: 50px;
}
.swiper{
	margin-top: 20px;
	width: 90%;
	height: 200px;
	padding: 0 5%;
}
.uni-margin-wrap {
	width: 690rpx;
	width: 100%;
}
.swiper {
	height: 300rpx;
}
.swiper-item {
	display: block;
	height: 300rpx;
	line-height: 300rpx;
	text-align: center;
	border-radius: 30px;
}
.swiper-list {
	margin-top: 40rpx;
	margin-bottom: 0;
}
.uni-common-mt {
	margin-top: 60rpx;
	position: relative;
}
.info {
	position: absolute;
	right: 20rpx;
}
.uni-padding-wrap {
	width: 550rpx;
	padding: 0 100rpx;
}
.uni-bg-red{
	background-color: red;
}
.uni-bg-green{
	background-color: green;
}
.uni-bg-blue{
	background-color: blue;
}
</style>
